<template>
  <el-row>
    <el-col>
      <el-card>
        <div slot="header" class="clearfix">
          <span>常用功能</span>
        </div>
        <div class="common-function">
          <div class="part">
            <img src="@/icons/iconImg/kuaidi.png" alt="">
            <p>快递作业</p>
          </div>
          <div class="part" @click="$router.push('/transport/transport-task')">
            <img src="@/icons/iconImg/yunshu.png" alt="">
            <p>运输任务</p>
          </div>
          <div class="part" @click="$router.push('/transport/line-manage')">
            <img src="@/icons/iconImg/xianlu.png" alt="">
            <p>线路管理</p>
          </div>
          <div class="part" @click="$router.push('/transit/vehicle')">
            <img src="@/icons/iconImg/cheliang.png" alt="">
            <p>车辆管理</p>
          </div>
          <div class="part" @click="$router.push('/transit/driver')">
            <img src="@/icons/iconImg/siji.png" alt="">
            <p>司机管理</p>
          </div>
          <div class="part" @click="$router.push('/transit/freight-manage')">
            <img src="@/icons/iconImg/yunfei.png" alt="">
            <p>运费查询</p>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.common-function{
  display: flex;
  justify-content: space-between;
  .part{
    height: 116px;
    width: 15%;
    background: #fafafb;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    img{
      width: 40px;
      height: 40px;
      margin-top: 20px;
    }
    p{
      font-size: 16px;
      color: #20232a;
      font-weight: 700;
    }
  }
  :hover{
      p{
        color: #e15536;
      }
    }
}
</style>
